<template>
  <div class="app-container">
    <p>上下步骤条：</p>
    <div class="steps-style">
      <!-- 上 -->
      <div class="up-step">
        <div  v-for="(item, index) in handle_list"  :key="index" :class="index===4?'end-progress': 'progress'" >
           <p v-if="item.istrue"> <i class="el-icon-bottom" style="font-size: 20px; color: red"></i>进行中</p>
        </div>
      </div>
      <!-- 下 -->
      <div class="down-step">
       <el-steps  :active="active" finish-status="success" >
        <el-step
            v-for="(item, index) in handle_list"
            :key="index"
            :title="item.department"
            :description="item.h_result ? item.h_result :'' " >
        </el-step>
       </el-steps>
      </div>
    </div>

    <el-button style="margin: 20px 0" @click="next">下一步</el-button>

    <p>左右步骤条：</p>
    <div class="delate-step">
       <!-- 左边 -->
        <div class="delate-step-lt">
          <div class="delate-time"   :style="{top: `${ index * ((300 - 46) / (handle_list.length - 1)) + 4 }px`, }"
            v-for="(item, index) in handle_list"  :key="index" >{{ item.h_time }}
            </div>
        </div>
        <!-- 右边 -->
        <div class="delate-step-rt">
          <el-steps direction="vertical" :active="active">
            <el-step
              v-for="(item, index) in handle_list"
              :key="index"
              :title="item.department"
              :description="item.h_result ? item.h_result :'' "
            ></el-step>
          </el-steps>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      handle_list: [
        { department: '步骤一', h_time: '2021-11-16', h_result: 'aaaaaa', istrue: true },
        { department: '步骤二', h_time: '2021-11-17', h_result: 'bbbbbb', istrue: false },
        { department: '步骤三', h_time: '2021-11-18', h_result: 'ccccc', istrue: false },
        { department: '步骤四', h_time: '2021-11-18', h_result: 'ccccc', istrue: false },
        { department: '步骤五', h_time: '2021-11-18', h_result: 'ccccc', istrue: false }
      ]
    }
  },

  methods: {
    next () {
      if (this.active++ > 4) {
        this.active = 0
      } else {
        this.handle_list[this.active].istrue = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  margin:10px;
  padding:20px;
  background: #fff;
}
.steps-style{
  .up-step{
    // width: 100%;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    white-space: nowrap;
  }
  .progress{
    flex-basis: 25%;
    display: inline-block;
    flex-shrink: 1;
  }
  .end-progress{
    flex-basis: auto!important;
    flex-shrink: 0;
    flex-grow: 0;
  }
}
.delate-step{
  width: 100%;
  height: 300px;
  padding-bottom: 40px;
  display: table;
  margin-top: 10px;
.delate-step-lt {
  width: 80px;
  color: #818181;
  font-size: 14px;
  display: table-cell;
  position: relative;
.delate-time {
    position: absolute;
  }
}
.delate-step-rt {
  display: table-cell;
}
}

</style>
